<template>
  <div class="sign-in">
    <div class="form" v-if="!isLogin">
      <p class="title">大湾区极端天气事件灾害链<br />综合监测和风险管控系统平台</p>
      <div class="input-container">
        <input type="text" id="uid" required name="uid" v-model="userinfo.uid" />
        <label for="uid">UID</label>
        <i class="under"></i>
      </div>
      <div class="input-container">
        <input
          :type="pwdType"
          id="pwd"
          class="active"
          required
          name="password"
          v-model="userinfo.password"
        />
        <label for="uid">密码</label>
        <div class="view-icon">
          <el-icon v-if="showPwd" @click="hidePassword">
            <sunny />
          </el-icon>
          <el-icon v-else @click="showPassword">
            <sunrise />
          </el-icon>
        </div>
        <i class="under"></i>
      </div>
    </div>
    <div v-if="!isLogin">
      <div class="buttonForm">
        <input type="submit" @click="checkForm" value="登录" id="btn" />
        <p class="forgot">
          <router-link to="/forget">忘记密码?</router-link>
        </p>
        <p class="noAccount">
          没有账户?
          <router-link to="/register">创建新用户</router-link>
        </p>
      </div>
    </div>
    <div class="form" v-if="isLogin">
      <p class="title">大湾区极端天气事件灾害链<br>综合监测和风险管控系统平台</p>
      <div class="avatar-div">
        <div class="avatar">
          <img class="avatar-img" src="../../assets/User.png" />
        </div>
      </div>
      <div class="text">尊敬的用户{{ $store.state.userinfo.uid }}，您已经登录!</div>
    </div>
    <div v-if="isLogin">
      <div class="btn-group">
        <el-button type="submit" @click="toPredict" value="Use" class="Use-btn">进入</el-button>
        <el-button type="submit" @click="Loginout" value="Loginout" class="Loginout-btn">登出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { mapGetters } from "vuex";
// import { idApi } from "../api/index.js";

export default {
  name: "sign-in",
  data() {
    return {
      userinfo: { uid: "", password: "", id: "" },
      showMsg: false,
      msg: "",
      isOk: false,
      showPwd: false,
      pwdType: "password",
      isLogin_: false,
      showFloatingWindow: false
    };
  },
  computed: {
    ...mapGetters(["isLogin"])
  },
  methods: {
    // // 处理弹出提示，isError为false是背景色为green，否则为red
    // alertMsg(msg, isError = true) {
    //   this.showMsg = true;
    //   if (!isError) this.isOk = true;
    //   this.msg = msg;
    //   setTimeout(() => {
    //     this.showMsg = false;
    //   }, 3000);
    // },
    // 检查表单信息
    // axios({
    //     method: "POST",
    //     url: "http://43.136.32.240/userFunc/login/",
    //     data: { uid: this.uid, password: this.password },
    //   })
    checkForm() {
      axios
        .post(
          "http://114.132.177.63/userFunc/login/",
          "uid=" + this.userinfo.uid + "&password=" + this.userinfo.password
        )
        .then(res => {
          if (res.data.code == 200) {
            ElMessage({
              message: "登陆成功",
              grouping: true,
              type: "success"
            });
            this.userinfo.id = res.data.id;
            this.$store.commit("Loginin", this.userinfo);
            this.isLogin_ = true;
          } else {
            ElMessage({
              message: "账号或密码错误！",
              grouping: true,
              type: "error"
            });
          }
        });
      // idApi.login({uid:this.uid,password:this.password}).then(res=>{console.log(res)})
    },

    showPassword() {
      this.pwdType = "text";
      this.showPwd = true;
    },
    hidePassword() {
      this.pwdType = "password";
      this.showPwd = false;
    },
    toPredict() {
      this.$router.push({
        path: "/radarPic"
      });
    },
    Loginout() {
      this.$store.commit("Loginout");
    }
    // test_api() {
    //   axios({
    //     method: "post",
    //     url: "http://43.136.32.240/userFunc/login/",
    //     data: {
    //       uid: "LiSi",
    //       password: 2,
    //     },
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },
  },
  mounted() {
    this.isLogin_ = this.isLogin;
  }
};
</script>

<style scoped>
.sign-in {
  position: relative;
  width: 100vw;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.form {
  width: 40vw;
  padding: 2% 5% 2% 5%;
  border-radius: 109px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 74.45px;
  color: rgba(0, 89, 88, 1);
  text-align: center;
  vertical-align: top;
}
.input-container {
  position: relative;
  width: 100%;
  margin: 5% 0;
}

.input-container input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  color: #222;
  padding: 8px;
}

.input-container label {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(61, 61, 61, 1);
  text-transform: uppercase;
  pointer-events: none;
  transition: 0.5s;
  font-weight: bold;
}

.input-container input:valid ~ label,
.input-container input:focus ~ label {
  color: rgb(10, 131, 212);
  transform: translateY(-15px);
  font-size: 0.6rem;
}

.input-container .under {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: transparent;
}

.input-container .under:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(139, 176, 175, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  animation: animate 3s linear infinite;
}

.avatar-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.avatar {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  width: 150px;
  border: none;
  height: 150px;
  position: relative;
  display: flex;
  justify-content: center;
}

.avatar img {
  width: 140px;
  height: 140px;
}

#btn {
  height: 40px;
  margin: 30px 0;
  width: 36vw;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

#btn:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}

.btn-group {
  display: flex;
  flex-direction: column;
}

.Use-btn {
  height: 40px;
  margin: 20px 0;
  width: 36vw;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

.Use-btn:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}

.Loginout-btn {
  height: 40px;
  margin: 10px 0 !important;
  width: 36vw;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

.Loginout-btn:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--color2-light) inset;
}

.buttonForm .noAccount,
.buttonForm .forgot {
  margin: 10px 0;
}
.text {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
}
.buttonForm .noAccount a,
.buttonForm .forgot a {
  text-decoration: none;
  padding: 0 5px;
  font-weight: bold;
  color: var(--color1-light);
}

.view-icon {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  font-size: 20px;
  transform: translateY(-50%);
  color: var(--color1-dark);
  cursor: pointer;
}
</style>
